<template>
  <div>
    <div class="profit">
      <div class="header">团队简介</div>
      <div class="content">
        <div style="border: 1px solid #ccc">
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useTeamStore } from "@/stores/team.sotre";
import { storeToRefs } from "pinia";
import { onBeforeUnmount, ref, shallowRef, computed } from "vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const teamStore = useTeamStore();
const { teamInfo } = storeToRefs(teamStore);

// 内容 HTML
const valueHtml = computed(() => {
  return teamInfo.value?.sign;
});
// const valueHtml = ref("");
const editorRef = shallowRef();
const mode = "default";
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容...", readOnly: true };
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor === null) return;
  editor.destroy();
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>

<style lang="less" scoped>
.profit {
  width: 100%;
  height: 100%;
  border: 1px solid #e3e9ed;
  border-radius: 4px;
}
.header {
  width: 100%;
  height: 40px;
  // background-color: cyan;
  background: #fcfcfc;
  display: flex;
  align-items: center;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom: 1px solid #dce3e8;
}
.content {
  flex: 1;
  background-color: white;
}
</style>
